<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style rel="stylesheet">
        tr{
        }
        td{
            background-color:#ffffff;
            width: 10px;
            height: 10px;
            border:1px solid black;
        }
    </style>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
</head>
<body>
<div id="home"></div>

<script>
//    画区域
var kuai =new Array();
for(var i=0;i<15;i++){
    var a = document.getElementById("home").appendChild(document.createElement("tr"));
    kuai[i]=a;
    for(var n=0;n<12;n++){
        var b = a.appendChild(document.createElement("td"));
        kuai[i][n] = b;
    }
}
console.log(kuai[2][5]);
//kuai[2][5].style.backgroundColor="red";

//    工厂模式生成图形
function Cell(row,col,color) {
    this.row = row;
    this.col = col;
    this.color = color;

//    kuai[row][col].style.backgroundColor = color;
}

function Shape(cells) {
    this.cells = cells;
}
Shape.prototype = {
    moveLeft:function(){
        return "moveleft";
    },
    moveRight:function(){
        return "moveright";
    }
}
function  L(cells) {
    console.log(cells);
    Shape.call(this,cells);
}
L.prototype = new Shape();

var l = new L(
    [
        new Cell(0,4,"red"),
        new Cell(0,5,"red"),
        new Cell(0,6,"red"),
        new Cell(1,5,"red")
    ]);
//    往下走
    console.log(l);
//    console.log(l.mo);
</script>
</body>
</html>